import 'package:flutter/material.dart';
import 'package:flutter_magic_planet/common/app_router.dart';
import 'package:get/get.dart';

import 'logic.dart';

class ComicChapterListPage extends StatelessWidget {
  final ComicChapterListLogic logic = Get.put(ComicChapterListLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
        iconTheme: IconThemeData(color: Colors.white),
        title: Text(
          logic.comic.title ?? '',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Container(
        child: Obx(() {
          return GridView.builder(
            shrinkWrap: true,
            itemCount: logic.chapters.length,
            padding: EdgeInsets.symmetric(horizontal: 16),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 12,
              crossAxisSpacing: 12,
              childAspectRatio: 1.3,
            ),
            itemBuilder: (context, activeIdx) {
              return GestureDetector(
                onTap: () {
                  AppRouter.toComicPlayer(
                      logic.chapters[activeIdx].chapterId ?? '');
                },
                child: Obx(
                  () => Container(
                    alignment: Alignment.center,
                    padding: EdgeInsets.symmetric(horizontal: 8),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      color: Color(0xffeeeeee),
                    ),
                    child: Text(
                      logic.chapters[activeIdx].title ?? '未知',
                      style: TextStyle(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
              );
            },
          );
        }),
      ),
    );
  }
}
